<!DOCTYPE html >
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../admin/authority.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="headScriptHH.jsp"%>
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/hh/cs36001script.js"></script>
</head>
<body>
	<div class="wrapper">
		<!-- BEGIN Top-Bar -->
		<%@ include file="../fragments/header.jsp"%>
		<!-- END Top-Bar -->

		<div id="detail-area" class="clearfix">
			<!-- BEGIN SIDEMENU -->
			<div class="hidden-xs hidden-sm page-sidebar" id="side-menu-bar">
				<ul class="page-sidebar-menu">					

					<!-- <div id="displaymenu"></div>  -->
					<%@ include file="../admin/menu.jsp" %>

				</ul>
			</div>
		<!-- End Side Menu -->
		<div class="col-sm-12 col-xs-12" id="right-side">
			<div id="navigator-bar"><i class="fa fa-home"></i> หน้าหลัก <i class="fa fa-angle-right ml-5 mr-5"></i> รายงานสถานะเส้นทางการอ่านมาตร</div><!--End navigator-bar-->
			<!-- Start detail-area -->
			<div>
				<div id="page-header" class="clearfix">
					<div>รายงานสถานะเส้นทางการอ่านมาตร</div>
				</div>
				
				<!-- ### Error / Success Message ### -->
				<div id="success_message" class="alert alert-success hide"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-check fa-stack-1x fa-inverse"></i> </span><span id="content_sucess"></span></div>
				<div id="error_message" class="alert alert-danger hide"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-times fa-stack-1x fa-inverse"></i></span><span id="content_error"></span></div>
				
				<!-- Start form-detail -->
				<div class="form-detail clearfix">
					<form role="form">
						<div class="search-box  no-radius">
							<div class="form-group clearfix search-header no-radius">
								<div class="pull-left">รายงานสถานะเส้นทางการอ่านมาตร</div>
								<div class="pull-right">
									<div id="hide-button"><i class="fa fa-chevron-circle-up"></i></div>
								</div>
							</div>
							<div id="box-body">
								<div class="form-group clearfix mt-20 ">
									<div class="col-sm-4 mt-5">
										<label for="inputZoneId">เขต</label> 
										<select
											class="form-control" id="inputZoneId" name="inputZoneId" onchange="loadRout()" >
											<option value="">-- เลือกเขต --</option>
										</select>
									</div>
									<div class="col-sm-4 mt-5">
										<label for="inputRoutSrc">เส้นทาง</label> 
										<select
											class="form-control" id="inputRoutSrc" name="inputRoutSrc">
											<option value="">-- เลือกเส้นทาง --</option>
										</select>
									</div>
									<div class="col-sm-4 mt-5">
										<label for="inputRoutDest">ถึงเส้นทาง</label> 
										<select
											class="form-control" id="inputRoutDest" name="inputRoutDest">
											<option value="">-- เลือกเส้นทาง --</option>
										</select>
									</div>
								</div>
								<div class="form-group mt-20 clearfix search-footer no-radius">
									<div class="col-sm-12 text-center">
										<button type="button" class="btn btn-primary" id="btnSearch" onclick="searchCommand()"> ตรวจสอบ</button>
										<button type="button" class="btn btn-primary" id="btnRefresh" onclick="location.reload()"><i class="glyphicon glyphicon-refresh"></i> เริ่มใหม่</button>
									</div>
								</div>
							</div>
							<!-- END BOX-BODY -->
						</div>
					</form>
				</div>
				<!-- End detail-area -->
			</div>
			<!-- End detail-area -->
			<div class="form-detail clearfix" style="margin-top:-20px;padding-top: 0px;">
				<div class="form-list" id="form-list" >
					<form role="form" name="form" action="" method="POST">
						<div class="list-detail-area">						
						<table id="routDataTable" class="stripe hover cell-border" cellspacing="0" width="100%" align="center">
        					<thead>
            					<tr style="background-color: #399bca; color:white; font-size: 0.9em;">
                					<th style="border-right: 1px solid #999" class="text-center">ลำดับ</th>
									<th style="border-right: 1px solid #999" class="text-center">เขต</th>
									<th style="border-right: 1px solid #999" class="text-center">เส้นทาง</th>
									<th style="border-right: 1px solid #999" class="text-center">เตรียมข้อมูลอ่านมาตร</th>
									<th style="border-right: 1px solid #999" class="text-center">ยืนยันการจัดทำใบแจ้งหนี้</th>
									<th style="border-right: 1px solid #999" class="text-center">ตั้งหนี้</th>
            					</tr>
        					</thead> 						
    					</table>
						</div>	
					</form>
			</div>
		</div>
		
		<div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModal" aria-hidden="true">
		  	  <div class="modal-dialog" style="width: 400px;">
		        <div class="modal-content">
		            <div class="modal-header">
		            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		            <h4 class="modal-title">กรุณาเลือกข้อมูลให้ครบถ้วน</h4>
		            </div>
						<div class="modal-body">
							<p><span class="fa-stack fa-lg mr-10" style=" color:#FC0"> <i class="fa fa-exclamation-triangle fa-stack-2x"></i></span>กรุณาเลือกเขตและเส้นทางให้ครบถ้วน</p>
						</div>
		            <div class="modal-footer" style="text-align: center;">
		                <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="glyphicon glyphicon-ok"></i> ตกลง</button>    
		        	</div>
		    	</div>
		  	</div>
		</div>
		
		<div id="footer-detail">Copyright © สงวนลิขสิทธิ์ พ.ศ.2557 โดย การประปานครหลวง</div>
	</div>
</div>
 <!-- End Detail-area-->

</div>
<!-- End Wrapper -->
</body>
</html>